<template>
  <div class="Classfiy-nav">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="table-nav">
      <!-- 添加角色 -->
      <add-user-classfiy :getList="getList"></add-user-classfiy>
      <!-- 不让列表展览开行修改数据的时候被关闭，
        设置属性: expand-row-keys="expands" 
                 row-key="id"
        设置事件: @expand-change="changeExpand"
          -->
      <el-table
        :data="rolesList"
        border
        style="width: 100%"
        stripe
        row-key="id"
        :expand-row-keys="expands"
        @expand-change="changeExpand"
      >
        <!-- 嵌入表格 -->
        <el-table-column type="expand" prop="id">
          <template #default="scope">
            <div>
              <table-two-com :scope="scope"></table-two-com>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column label="角色名称" prop="roleName" />
        <el-table-column label="角色描述" prop="roleDesc" />
        <!-- 按钮 -->
        <el-table-column label="操作" min-width="200">
          <template #default="scope">
            <div>
              <!-- 修改按钮 -->
              <set-user-com :scope="scope" :getList="getList"></set-user-com>
              <!-- 删除按钮 -->
              <el-button type="danger" icon="Delete" @click="deleteUser(scope)"
                >删除</el-button
              >
              <!-- 分配职位按钮-->
              <el-tooltip content="分配权限" placement="right-start">
                <change-role-com
                  :getList="getList"
                  :scope="scope"
                ></change-role-com>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { getRoleList, deleterole } from "@/api/roleList";
import { reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AddUserClassfiy from "@/components/userClassify/AddUserClassfiy.vue";
import SetUserCom from "@/components/userClassify/SetUserCom.vue";
import ChangeRoleCom from "@/components/userClassify/ChangeRoleCom.vue";
import TableTwoCom from "@/components/userClassify/TableTwoCom.vue";
// 获取列表
let rolesList = reactive([]);
let getList = async () => {
  let res = await getRoleList();
  rolesList.splice(0, rolesList.length);
  rolesList.push(...res.data);
};
let expands = reactive([]);
const changeExpand = (row) => {
  if (expands.indexOf(row.id) == -1) {
    expands.push(row.id);
  } else {
    // console.log(expands);
    expands.splice(expands.indexOf(row.id), 1);
  }
};
getList();
const deleteUser = async (scope) => {
  ElMessageBox.confirm("此操作将删除该角色, 是否继续?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await deleterole(scope.row.id);
      let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
      ElMessage({
        type: ls ? "success" : "error",
        message: ls ? "删除成功" : res.meta.msg,
      });
      getList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
//表格合并行
</script>

<style lang="scss" scoped>
.Classfiy-nav {
  position: relative;
  width: 100%;
  // height: 100%;
  overflow: auto;
  .table-nav {
    position: absolute;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 10px;
    background-color: white;
    overflow: hidden;
    .el-table {
      margin: 20px 0;
    }
  }
}
.el-table ::v-deep tbody tr:hover > td {
  background-color: transparent;
}
</style>